import React, { useState } from 'react'
import { Button, Drawer, Form, Select, Radio, Input, TreeSelect, } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
export default function profile() {
  const userInfo = JSON.parse(localStorage.user)
  const { TextArea } = Input;
  const [open, setOpen] = useState(false);
  const showDrawer = () => {
    setOpen(true);
    form.setFieldsValue({
      email: userInfo.email,
      mobile: userInfo.mobile,
      deptId: userInfo.deptId,
      ssex: userInfo.ssex,
      description: userInfo.description
    })
  };
  const onClose = () => {
    setOpen(false);
  };
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const [value, setValue] = useState();
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const [form] = Form.useForm()

  return (
    <div style={{ width: '90%', padding: 32 }} className='mar0'>
      <div className='commonBorder' style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'right', height: 50 }}>
        <Button style={{ border: 'none', color: '#1890FF' }} onClick={showDrawer}>编辑资料</Button>
      </div>
      <div className='commonBorder' style={{ display: 'flex' }}>
        <div style={{ margin: 20, height: 220, display: 'flex', alignContent: 'space-around', flexWrap: 'wrap' }}>
          <div style={{ textAlign: 'center', width: '100%' }}>
            <img src={"http://xawn.f3322.net:8002/distremote/static/avatar/" + userInfo.avatar} style={{ width: 160, height: 160 }} />
          </div>
          <div style={{ textAlign: 'center', width: '100%' }}>
            <Button ><i><UploadOutlined /></i>修改头像</Button>
          </div>
        </div>
        <div style={{ margin: 20, display: 'flex', alignContent: 'space-around', flexWrap: 'wrap', width: 500, height: 220 }}>
          <div style={{ width: '100%' }}>账户：{userInfo.username}</div>
          <div style={{ width: '100%' }}>角色：{userInfo.roleName}</div>
          <div style={{ width: '100%' }}>性别：{userInfo.ssex === '0' ? '男' : '保密'}</div>
          <div style={{ width: '100%' }}>电话：{userInfo.mobile == null ? '暂未绑定电话' : userInfo.mobile}</div>
          <div style={{ width: '100%' }}>邮箱：{userInfo.email == null ? '暂未绑定邮箱' : userInfo.email}</div>
          <div style={{ width: '100%' }}>部门：{userInfo.deptName}</div>
          <div style={{ width: '100%' }}>描述：{userInfo.description}</div>
        </div>
      </div>
      <Drawer title="编辑资料" placement="right" open={open}
        closable={false}
        footer={
          <Button onClick={onClose} type='danger'>点击关闭</Button>
        }
        footerStyle={{ textAlign: 'right' }}
        maskClosable={false}
        width={400}
      >
        <Form
          form={form}
          labelCol={{
            span: 8,
          }}
          wrapperCol={{
            span: 16,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="邮箱"
            name="email"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="手机"
            name="mobile"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label='部门'
            name='deptId'
          >
            <TreeSelect
              treeData={[
                {
                  title: '开发部',
                  value: 1,
                  children: [
                    {
                      title: '开发一部',
                      value: 2,
                    },
                    {
                      title: '开发二部',
                      value: 3
                    }
                  ],
                },
                { title: '市场部', value: 4 },
                { title: '人事部', value: 5 },
                { title: '测试部', value: 6 }
              ]}
            />

          </Form.Item>

          <Form.Item
            label='性别'
            name='ssex'
          >
            <Radio.Group onChange={onChange} value={value}>
              <Radio value='0'>男</Radio>
              <Radio value='1'>女</Radio>
              <Radio value='2'>保密</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label='描述'
            name='description'
          >
            <TextArea rows={4} />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          >
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Drawer>
    </div>

  )
}
